<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.9.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="../css/fs.css" media="all"/>
    <script type="text/javascript" src="../plugins/layui/layui.js"></script>
    <script src="../js/tools.js"></script>
    <!--inputTags-->
    <link rel="stylesheet" type="text/css" href="../plugins/addTag/jquery.tagsinput.css" media="all"/>
    <script type="text/javascript" src="../plugins/addTag/jquery.tagsinput.js"></script>
    <script src="../controller/video.js?t=201901291624"></script>

    <!--vidoe.js-->
    <link rel="stylesheet" type="text/css" href="../plugins/videoJs/video-js.min.css" media="all"/>
    <script type="text/javascript" src="../plugins/videoJs/video.min.js"></script>

    <!--sortablejs-->
    <script type="text/javascript" src="../plugins/sortableJS/Sortable.js"></script>
    <link rel="stylesheet" type="text/css" href="../plugins/sortableJS/theme.css" media="all"/>




    <style>
        .layui-table-cell{
            height: auto;
            white-space: normal;
        }
        .layui-form-label{
            width: 80px;
        }

        .icon-play{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 52px;
            height: 52px;
            margin: -26px 0 0 -26px;
            background: url(http://vs5.bdstatic.com/browse_static/v3/videoHome/img/play_821ce903.png) no-repeat 50% 50%;
            opacity: 0;
            filter: alpha(opacity=0);
            z-index: 1;
            cursor: pointer;
            transition: opacity .4s ease-in;

        }
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
</head>
<body>
    <blockquote style="margin-top: 10px;margin-left: 5px;margin-right: 5px;height: 60px" class="layui-elem-quote news_search">
        <div class="demoTable">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="tag"  placeholder="标签" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="searchpublisher"  placeholder="创建人的昵称/电话号码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe615;</i>查询</button>

                        <button  class="layui-btn" id="transferBT"  ><i class="layui-icon">&#xe756;</i>篮同学视频迁移至短视频</button>
                        <button id="addMore" class="layui-btn"  ><i class="layui-icon">&#xe654;</i>视频上传</button>
                        <!--<button id="addVideoAndInfo" class="layui-btn"  ><i class="layui-icon">&#xe654;</i>导入视频信息</button>-->
                    </div>
                </div>
            </div>
        </div>
    </blockquote>
    <div style="margin-left:5px;margin-right: 5px" >
        <div class="layui-col-md12">
            <blockquote>
                <div class="layui-btn-group demoTable">

                    <button class="layui-btn layui-bg-orange" data-type="getCheckData">
                        <i class="layui-icon">&#xe857;</i>视频合成
                    </button>
                    <button class="layui-btn layui-btn-danger" data-type="delCheckData">
                        <i class="layui-icon">&#xe640;</i>批量删除
                    </button>
                </div>
            </blockquote>
        </div>

        <table class="layui-hide" lay-filter="demo" id="table"></table>
    </div>
    <!--标签编辑窗口-->
    <div style="display: none; margin-top:30px" id="addUpdate">
        <form class="layui-form" action="" lay-filter="tag">
                <div class="layui-form-item">
                <label class="layui-form-label">视频标签</label>
                <input type="hidden" id="videoId" name="videoId">

                <div class="tagsinput-primary form-group" >
                    <input type="text"  class="layui-input" name="videoTags" id="addTags"   />
                </div>
            </div>

            <div  style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="subTag">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--标签编辑窗口-->
    <!--标题编辑窗口-->
    <div style="display: none; margin-top:30px" id="contentUpdate">
        <form class="layui-form" action="" lay-filter="tag">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频标题</label>
                <input type="hidden" id="momentId" name="momentId">
                <input type="hidden" id="publisher" name="publisher">
                <div class="layui-input-block">
                    <textarea id="contentText" name="contentText" onkeyup="" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>

            <div  style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="subContent">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--标题编辑窗口-->

    <!--迁移窗口-->
    <div style="display: none; margin-top:30px" id="transfer">
        <form class="layui-form" action="" lay-filter="tranFilter">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">视频时间段:</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="searchStartTime"  name="startTime"    placeholder="开始时间" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="searchEndTime"  name="endTime"  lay-verify="required" placeholder="结束时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">俱乐部:</label>
                <div style="width: 450px"  class="layui-input-block">
                    <select name="club" id="searchClub"  lay-verify="required" lay-filter="club">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">视频所属用户id:</label>
                <div style="width: 450px"  class="layui-input-block">
                    <input type="number"    name="publisher"  lay-verify="required"   class="layui-input">
                </div>
            </div>

            <div  style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="subTransfer">开始迁移</button>
                </div>
            </div>
        </form>
    </div>
    <!--迁移窗口-->
    <!--视频新增窗口-->
    <div style="display: none; margin-top:30px;margin-left: 20px;margin-right: 20px" id="addVideo">

        <form class="layui-form" action="" lay-filter="tranFilter" enctype="multipart/form-data" >
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择视频</button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频所属用户id:</label>
                        <div style="width: 450px"  class="layui-input-block">
                            <input type="number" id="videoPublisher"   name="publisher"    class="layui-input">
                        </div>
                    </div>
                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                </div>
            </div>



            <div  style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="subAddVideo">提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--视频新增窗口-->

    <!--标签播放窗口-->
    <div style="display: none; margin-top:30px" id="openVideo">
        <video  id="myVideo" class="video-js vjs-default-skin" controls preload="none" width="630" height="325"
                poster="http://v.kaidanwang.com/snapshot/4c95f238f46849cf8aa22b5feb910fde00001.jpg"
                data-setup="{}">
            <source src="http://v.kaidanwang.com/4c95f238f46849cf8aa22b5feb910fde/cb7a76b65b244eba8ed97c79fb844148-d9f17ceb3a180cea28ae9107ab8b0f0d-ld.m3u8" type='application/x-mpegURL' />
        </video>
    </div>

    <!--视频合成窗口-->
    <div style="display: none; margin-top:30px" id="synthesisVideo">
        <form id="synthesis" class="layui-form" action="" lay-filter="SynthesisVideo">

            <blockquote style="color: red;margin-left: 20px;margin-right: 20px" class="layui-elem-quote layui-text">
                注意:请避免横屏和竖屏的视频进行合成,这会导致合成后的视频分辨率发生变化!!
            </blockquote>
            <div class="layui-form-item">
                <div id="grid" class="row">
                    <h4 style="margin-left: 20px" class="col-12">已选视频左右拖动排序</h4>
                    <div id="gridDemo" class="col"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">视频所属用户id:</label>
                <div style="width: 450px"  class="layui-input-block">
                    <input type="number" id="SynthesisPublisher"   name="publisher"  lay-verify="required|search"    class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="checkbox" name="tailSwitch"  lay-filter="tailSwitch" lay-verify="content"  id="tailSwitch" lay-skin="primary" title="是否添加片尾" >

                </div>
            </div>
            <div id="tail" class="layui-form-item">
                <label class="layui-form-label">片尾视频ID:</label>
                <div style="width: 450px"  class="layui-input-block">
                    <input type="text"   name="videoTail"     class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频标题</label>
                <div class="layui-input-block">
                    <textarea  name="contentText" onkeyup="" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div  style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="subSynthesisVideo">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--视频合成窗口-->

    <!--标签播放窗口-->
    <script type="text/html" id="barDemo">
        {{#  if(d.flag ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑标签</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="updateContent">编辑标题</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {{#  } else { }}

        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑标签</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {{#  } }}

    </script>
<script >
    layui.use(['form', 'layedit', 'laydate',"table",'upload'], function() {
        var $ = layui.jquery
            , upload = layui.upload;
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#table'
            ,url: '/videoController/paramlist'
            ,cols: [
                [
                    {type:'checkbox'},
                    {type:'numbers',title:"序",align:"center"},

                    {  title: '摘要',align:"center", event: 'openVideo',templet: function(d){
                        if(d.tags != null&&d.status == 1) {
                            return "<div class='layui-row'>"+
                                "<div  class='layui-col-xs6' >"+
                                    '<img  style="width: 100px;height: 100px"   src="'+d.videoFaceImage+'"   />'+
                                '<i class="layui-icon" style="font-size: 50px!important;margin:-26px 0 0 -70px ;"  >&#xe652;</i>   '+
                                "</div>"+
                                "<div class='layui-col-xs6'>" +d.tags+"</div>"
                                +"</div>";
                        }else  if(d.tags == null&&d.status == 1) {
                            return "<div class='layui-row'>"+
                                        "<div  class='layui-col-xs6' >"+
                                            '<img  style="width: 100px;height: 100px"   src="'+d.videoFaceImage+'"   />'+
                                             '<i class="layui-icon" style="font-size: 50px!important;margin:-26px 0 0 -70px ;"  >&#xe652;</i>   '+
                                        "</div>"+
                                    "</div>"
                        }else if(d.status == 0 &&d.tags != null) {
                            return  d.tags
                        }else if(d.status == 0 &&d.tags == null) {
                            return "暂无信息"
                        }
                    }},
                    { field: 'contentText', title: '标题', align:"center"},

                    { field: 'publisherName',width:"10%", title: '创建人',align:"center"},

                    {field: 'aliyunStatus', width:"10%",title: '视频状态',align:"center",templet: function(d){
                        if(d.aliyunStatus =="Uploading"){
                            return "上传中";
                        }else if(d.aliyunStatus =="UploadFail"){
                            return "上传失败";
                        }else if(d.aliyunStatus =="UploadSucc"){
                            return "上传完成";
                        }else if(d.aliyunStatus =="Transcoding"){
                            return "转码中";
                        }else if(d.aliyunStatus =="TranscodeFail"){
                            return "转码失败";
                        }else if(d.aliyunStatus =="Checking"){
                            return "审核中";
                        }else if(d.aliyunStatus =="Blocked"){
                            return "屏蔽";
                        }else if(d.aliyunStatus =="Normal"){
                            return "正常";
                        }else{
                            return "视频不存在";
                        }

                    }},
                    {field: 'createTime', width:"12%",title: '创建时间',align:"center",templet: function(d){
                        if(isNull(d.createTime)){
                            return "--";
                        }
                        return getFormatDateByLong(d.createTime, "yyyy-MM-dd hh:mm");
                    }},
                    {field: null ,width:"15%", title: '操作',align:"center",toolbar:"#barDemo" }
                ]
            ]
            ,id: 'testReload'
            ,page: true
            ,done:function (res, curr, count) {
                sessionStorage.setItem("curr",curr)

            }
        });

        var $ = layui.$, active = {
            reload: function(){

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        tag:$('input[name="tag"]').val(),
                        name:$('input[name="searchpublisher"]').val()
                    }
                });
            },
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('testReload')
                    ,data = checkStatus.data;

                if(data.length == 0){
                    layer.alert('请选择视频', {icon: 5});
                    return false
                }
                if(data.length == 1){
                    layer.alert('请选择至少两个视频进行合成', {icon: 5});
                    return false
                }
                if(data.length > 30){
                    layer.alert('至多有30个视频进行合成', {icon: 5});
                    return false
                }

                $('#synthesis')[0].reset();
                $('#gridDemo').empty()
                var json = JSON.stringify(data)
                var ids =new Array();
                $.each(eval(json),function (i,n) {
                    ids.push(n.aliVideoId)
                    $("#SynthesisPublisher").val(n.firstUserId)
                    var clss="grid-square"
                    var html ='<div  class="'+clss+'">'+ '<img  data-id="'+n.aliVideoId+'" style="width: 100px;height: 100px"   src="'+n.videoFaceImage+'"   />'+'</div>'
                    $('#gridDemo').append(html);
                })
                ids.join(',')

                var  width=($(window).width()*0.6);
                var height=($(window).height()*0.9);
                layer.open({
                    type: 1,
                    closeBtn: 0,
                    area: [width + 'px', height + 'px'],//大小
                    content: $("#synthesisVideo"),
                    skin: "layui-layer-molv",
                    title:  "合成的新视频信息"
                    ,btnAlign: 'c'
                    ,btn: ['保存', '取消']
                    ,yes: function(index, layero){
                        layero.find('form').find('button[lay-submit]').click();
                        return false
                    }
                    ,btn2: function(){
                        $('#synthesis')[0].reset();
                        $('#gridDemo').empty()
                        layer.closeAll();
                    }
                })



            }
            ,delCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('testReload')
                    ,data = checkStatus.data;

                if(data.length == 0){
                    layer.alert('请选择至少一条数据', {icon: 5});
                    return false
                }
                var json = JSON.stringify(data)
                var ids =new Array();
                $.each(eval(json),function (i,n) {
                    ids.push(n.id)
                })
                ids.join(',')
                layer.confirm('确定删除吗?', function(index){
                    $.ajax({
                        url:"/videoController/delByIds?ids="+ids,
                        type:"POST",
                        dataType:"json",
                        success:function (data,status,xhr) {
                            if(xhr.status == 204){
                                layer.alert('删除成功', {icon: 1}, function(index){
                                    layer.close(index);
                                    var curr = sessionStorage.getItem("curr");
                                    table.reload('testReload',{page:{curr:curr}});
                                });
                            }else if(xhr.status == 500){
                                layer.alert('删除出错', {icon: 5});
                            }

                        }
                    })
                    layer.close(index);

                });


            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    })
</script>

</body>
</html>